<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流效果</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        ul{
            width:250px;
            height:auto;
            border:solid 1px #ddd;
            float:left;
            list-style:none;
            margin-right:30px;
            padding:0px 10px;
            height:auto;
        }

        ul:first-child{
            margin-left:180px;
        }
        ul li{
            border-bottom:solid 1px #ddd;
            padding-bottom:15px;
        }

        #bak {
            display:none;
        }
    </style>
</head>
<body>
<div id="list">
    <ul>

    </ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>

<div id="bak">
    <li>
        <img width="100%" src="" alt="">
        <h4></h4>
        <p></p>
    </li>
</div>
<button class="a"></button>
<script src="jquery-1.8.3.min.js"></script>
<script>
    //检测变量
    var isLoading = false;
    var page = 1;

    //获取数据的函数
    function load() {
        $.get('pubu-goods.php', {page:page}, function(data){
            // console.log(data);
            var data = $.parseJSON(data);
            for(var i=0;i<data.length;i++) {
                //创建li元素
                var li = $('#bak li').clone(true);
                li.find('img').attr('src',data[i]['pic']);
                li.find('h4').html(data[i].title);
                li.find('p').html(data[i].price);
                //插入到ul中
                var index = i % 4;
                $('#list > ul').eq(index).append(li);
            }
            isLoading = false;
            page++;
        });
    }

    load();

    $(".a").click(function(){
        //文档的高度
        var sH = $(document).height();
        //可视区域高度
        var cH = $(window).height();
        var sT = $(window).scrollTop();

        var res = sH - cH - sT;
        //判断
        if(res <= 100) {
            if(isLoading) return;
            isLoading = true;
            load();
        }
    });

</script>
</body>
</html>